{{define "Styles"}}
/*
 * This stylesheet define styles for the {def,repo}-landing pages.
 */


 /*
 	Variables
*/

* {
	--blue-1			 : rgb(0, 82, 140);
	--blue-2			 : rgb(0, 146, 222);
	--blue-3			 : rgb(15, 182, 242);
	--blue-4			 : rgb(119, 209, 242);
	--blue-5			 : rgb(192, 235, 250);

	--purple-1		 : rgb(123, 13, 172);
	--purple-2		 : rgb(177, 20, 247);
	--purple-3		 : rgb(142, 20, 255);

	--orange-1		 : rgb(230, 69, 0);
	--orange-2		 : rgb(248, 96, 18);
	--orange-3		 : rgb(255, 165, 120);

	--green-1		   : rgb(5, 128, 128);
	--green-2		   : rgb(20, 166, 148);
	--green-3		   : rgb(13, 206, 183);

	--red-1			   : rgb(246, 106, 106);
	--red-2			   : rgb(242, 73, 73);

	--cool-gray-1	 : rgb(26, 48, 77);
	--cool-gray-2	 : rgb(52, 73, 102);
	--cool-gray-3	 : rgb(119, 147, 174);
	--cool-gray-3-1	 : rgba(119, 147, 174, 0.1);
	--cool-gray-3-2	 : rgba(119, 147, 174, 0.2);
	--cool-gray-4	 : rgb(213, 229, 242);

	--gray				 : rgb(250, 250, 250);

	--text         : rgb(26, 48, 77);
	--link         : rgb(0, 146, 214);
	--link-hover   : rgb(0, 82, 140);

	--sans-serif: "circular-std", -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", "San Francisco", "SFNS Display", Roboto, "Lucida Grande", "avenir next", avenir, Helvetica, Ubuntu, "segoe ui", arial, sans-serif;
	--monospace: "Lucida Console", Monaco, monospace;

	--base-font-size: 15px;
	--base-line-height: 1.5;

	--code-font-size: 0.9em;
	--code-line-height: 1.8;

	--radius: 3px;

}

@font-face {
  font-family: 'circular-std';
  src: url('{{assetURL "/fonts/circular-std-subsetted/lineto-circular-book.woff"}}') format('woff');
}
@font-face {
  font-family: 'circular-std';
  src: url('{{assetURL "/fonts/circular-std-subsetted/lineto-circular-bookItalic.woff"}}') format('woff');
	font-style: oblique;
}
@font-face {
  font-family: 'circular-std';
  src: url('{{assetURL "/fonts/circular-std-subsetted/lineto-circular-bold.woff"}}') format('woff');
	font-weight: bold;
}
@font-face {
  font-family: 'circular-std';
  src: url('{{assetURL "/fonts/circular-std-subsetted/lineto-circular-boldItalic.woff"}}') format('woff');
	font-weight: bold;
	font-style: oblique;
}

/*
 * Color
 */


.blue-1 { color: var(--blue-1); }
.blue-2 { color: var(--blue-2); }
.blue-3 { color: var(--blue-3); }

.purple-1 { color: var(--purple-1); }
.purple-2 { color: var(--purple-2); }
.purple-3 { color: var(--purple-3); }

.white { color: white; }

.cool-gray-1 { color: var(--cool-gray-1); }
.cool-gray-2 { color: var(--cool-gray-2); }
.cool-gray-3 { color: var(--cool-gray-3); }
.cool-gray-4 { color: var(--cool-gray-4); }

.bg-blue-1 { background-color: var(--blue-1); }
.bg-blue-2 { background-color: var(--blue-2); }
.bg-blue-3 { background-color: var(--blue-3); }

.bg-white { background-color: white; }
.bg-gray { background-color: var(--gray); }

/*
 * Typography
 */

body {
	color: var(--text);
	font-family: var(--sans-serif);
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	-webkit-font-smoothing: antialiased;
}

pre,
code,
.code {
	font-family: var(--monospace);
	font-size: var(--code-font-size);
	line-height: var(--code-line-height);
	-webkit-font-smoothing: auto;
}

a {
	color: var(--link);
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

a:hover {
	color: var(--link-hover);
}

.link-subtle {
	color: inherit;
	text-decoration: underline;
}

.link-subtle:hover { text-decoration: none; }

p { margin-bottom: 1.5rem }

.lh0 { line-height: 0; }

/*
 * Utilities
 */

.border-cool-gray-3-2 { border-color: var(--cool-gray-3-2); }
.border-cool-gray-4 { border-color: var(--cool-gray-4); }

.shadow {
	box-shadow: 0 1px 6px 0 var(--cool-gray-3-1);
	/*-webkit-box-shadow:
	-ms-box-shadow: */
}

.spin:hover {	animation: spin 0.5s ease-in-out 1; }

@keyframes spin {
	50% { transform: rotate(180deg) scale(1.2) }
	100% { transform: rotate(180deg) scale(1) }
}

/*
 * Elements
 */

/* Lists */

li { margin: 1rem 0; }

/* Buttons */

.btn {
	border-radius: var(--radius);
	color: white;
	display: inline-block;
	font-weight: bold;
	padding: 8px 16px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

a.btn {	color: white; }

.btn-blue { background-color: var(--blue-3); }
.btn-blue:hover { background-color: var(--blue-2); }

/* Pre / Dumb Code snippet */

pre {
	background: white;
	border-radius: var(--radius);
	border: 1px solid var(--cool-gray-4);
	color: var(--blue-1);
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
	padding: 1rem;
}

/* Code snippet */

.snippet {
	overflow-x: auto;
  box-shadow: inset -1px 0 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: inset -1px 0 4px rgba(0,0,0,0.15);
	-moz-box-shadow: inset -1px 0 4px rgba(0,0,0,0.15);
}

.snippet,
.snippet .pln,
.snippet .pun,
.snippet .opn,
.snippet .clo {
	color: var(--blue-1);
}

.snippet a {text-decoration: none; }

.snippet .com {
	color: var(--cool-gray-3);
	font-style: italic;
}

.snippet .lit,
.snippet .str {
	color: var(--orange-2);
}

.snippet a,
.snippet .kwd,
.snippet .tag,
.snippet .fun {
	color: var(--purple-2);
}

.snippet .atn,
.snippet .typ {
	color: var(--blue-2);
}

.snippet .dec,
.snippet .var,
.snippet .atv {
	color: var(--green-3);
}

.wrap {
	word-wrap: break-word;
}

{{end}}
